<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="receive_search"
      @toAdd="add_data"
      :isHaveExport="false"
      :isHaveAdd="false"
      :isShow="false"
      :isHavePagination="false"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          stripe
          v-loading="loading"
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
        >
          <el-table-column label="客户头像" align="center" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <img
                  :src="$fnc.getImgUrl(scope.row.avatar)"
                  style="width:80px;height:80px;border-radius:50%;"
                  alt
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户信息" min-width="250" align="center">
            <template slot-scope="scope">
              <div class="user_table">
                <span>用户账号：</span>
                <small>{{ scope.row.username || "----" }}</small>
                <br />
                <span>用户昵称：</span>
                <small>{{ scope.row.nickname || "----" }}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="内容" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <div>
                  <small v-for="(item,index) in scope.row.content" :key="index">
                    {{ item.content || "----" }}
                    <br />
                  </small>
                </div>
              </div>
            </template>
          </el-table-column>-->

          <el-table-column prop="name" label="其它信息" width="500">
            <template slot-scope="scope">
              <div class="user_table">
                <span>开始时间：</span>
                <small>{{ scope.row.staff_time | getTimeFormat}}</small>
                <br />
                <span>当前状态：</span>
                <small>{{ scope.row.staff_belong==1?'锁定':'未锁定'}}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column width="300" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="seeText(scope.row.content)" type="success">查看内容</el-button>
              <el-button size="mini" @click="del(scope.row.id)" type="danger">删除客户</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
    <el-dialog
      :close-on-click-modal="false"
      title="消息内容"
      :append-to-body="true"
      width="780px"
      :visible.sync="dialogeditVisible"
    >
      <div style="display:flex;    flex-direction: column;">
        <div style="width:100%;display:flex; flex-direction: column; align-items: center;">
          <el-table border :data="textContext">
            <el-table-column label="时间">
              <template slot-scope="scope">{{scope.row.created_time|getTimeFormat}}</template>
            </el-table-column>
            <el-table-column label="内容" prop="content"></el-table-column>
          </el-table>
        </div>
        <div style="margin-top:15px; display:flex;justify-content: flex-end;">
          <el-button type="primary" @click="closeShow" size="mini">关闭</el-button>
        </div>
      </div>
    </el-dialog>
    <keep-alive>
      <component
        :is="current"
        :show="shows"
        :isAll="true"
        showType="list"
        @sendShop="getSend"
        @isshow="getShow"
      ></component>
    </keep-alive>
  </div>
</template>
<script>
import uploadpic from "@/components/page/pic/up_pic"; //上传图片
// import { seeType } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import xzShop from "@/components/currency/xz_shop.vue";
export default {
  data() {
    return {
      shows: true,
      current: "",
      shopinfo: {
        title: "",
      },
      // userSearchData: seeType,
      dialogeditVisible: false,
      // 输入值库
      edit_form: {
        piclink: "",
      },
      // editMsg: {},
      createTime: [],
      formVideo: {
        uid: "",
        uri: "",
        is_recommend: 0,
        // title: "",
        duration: "",
        start_time: "",
        stop_time: "",
      },
      dialogaddVisible: false,
      playurl: "",
      is_edit: false,
      dialogFormVisible: false,
      live_single: {
        piclink: "",
      },
      current: "",
      loading: false,
      list: [],
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      row: {},
      multipleSelection: [],
      showCity: true,
      // 头像
      dialogImageUrl: "",
      dialogVisible: false,
      // 分类
      options: [
        {
          value: "0",
          label: "关闭",
        },
        {
          value: "1",
          label: "开启",
        },
      ],

      edmsgs: {},
      nowPlace: "",
      timeMsg: [],
      optionId: "",
      textContext: [],
    };
  },
  components: {
    uploadpic,
    xzShop,
  },

  mounted() {
    this.optionId = this.$route.query.id ? this.$route.query.id : "";
    this.getcrm_client();
  },
  methods: {
    seeText(context) {
      // 查看内容
      this.dialogeditVisible = true;
      this.textContext = context;
    },
    closeShow() {
      this.dialogeditVisible = false;
    },
    getcrm_client() {
      let params = {};
      params.id = this.optionId;
      console.log("comming");
      this.$api.getCrm.getPloyeeClient(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
      });
    },
    sortNew(index, row) {
      var params = {};
      params = row;
      this.$api.getTask.editTaskCate(params).then((res) => {
        if (res.data.code == 200) {
          this.$swal("编辑成功！", res.data.result, "success");
          this.getCate();
        } else {
          this.$swal("出错了！", res.data.result, "error");
        }
        this.dialogeditVisible = false;
      });
    },
    getOpen(val, row) {
      var params = {};
      params = row;
      params.show = val;
      this.$api.getTask.editTaskCate(params).then((res) => {
        if (res.data.code == 200) {
          this.$swal("编辑成功！", res.data.result, "success");
          this.getCate();
        } else {
          this.$swal("出错了！", res.data.result, "error");
        }
        this.dialogeditVisible = false;
      });
    },
    sorta(a, b) {
      return b - a;
    },
    // 删除
    del(id) {
      let params = {};
      params.id = id;
      this.$swal({
        title: "您确定要删除这个用户吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          this.$api.getCrm.del_client(params).then((res) => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "删除成功", "success");
              this.getcrm_client();
            } else {
              this.$swal("删除失败！", res.data.result, "error");
              this.getcrm_client();
            }
          });
        }
      });
    },

    xzshop(str) {
      if (str == "xzShop") {
        if (
          this.$store.state.shopSlist == "" ||
          this.$store.state.shopSlist.page != 1
        ) {
          this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
        }
      }
      this.current = str;
      this.shows = true;
    },
    getShow(val) {
      this.shows = val;
    },
    getSend(row) {
      console.log(row);
      if (this.current == "xzShop") {
        console.log(row);
        this.shopinfo = row;
        this.formVideo.pid = row.id;
      }

      // this.$emit("sendRow",row)
    },

    onSuccess(pic) {
      // 图片上传成功的回调
      console.log("9999999999999", pic);
      this.$set(this.edit_form, "piclink", pic);
      this.$set(this.edmsgs, "piclink", pic);

      // this.$set(this.edit_form, "imgs", pic);

      // this.edit_form.cover1 = pic;
    },
    onSuccesss(pic) {
      console.log("isssss");
      this.$set(this.edmsg, "imgs", pic);
      this.$set(this.edit_form, "imgs", pic);
    },
    editbtn(item) {
      this.edit_form = item;
      this.dialogeditVisible = true;
    },

    rev_send_url(val) {
      this.formVideo.uri = val.url;
    },
    add_data() {
      this.dialogFormVisible = true;
    },
    dia_close() {
      this.playurl = "";
      var x = document.getElementById("videobox");
      x.load();
    },
    showvideo(info) {
      this.dialogFormVisible = true;
      if (info.uri.indexOf("http") < 0) {
        this.playurl =
          "https://inexweb.oss-cn-shenzhen.aliyuncs.com/" + info.uri;
      } else {
        this.playurl = info.uri;
      }
      this.$nextTick(() => {
        var x = document.getElementById("videobox");
        x.load();
      });
    },
    receive_search(obj) {
      // console.log(obj)
      this.searchAll = obj;
      // this.getNewsAll(obj);
      this.getType(obj);
    },
    getNewsAll(params) {
      console.log(1, params);
      console.log("ccccc");
      params.id = this.$route.query.id;
      this.$api.getBasketBalls.getType(params).then((res) => {
        if (res.data.code === 200) {
          this.loading = false;
          this.list = res.data.result;
          console.log(555);
          console.log(this.list);
        }
      });
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },

    reload() {
      this.getNewsAll(this.searchAll);
    },
    // 添加图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 删除
    beforeCreate() {},
  },
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}

.place {
  margin: 5px 0;
}
.is_item {
  display: flex;
  align-items: flex-end;
  .types {
    div {
      width: 200px;
      margin-right: 10px;
    }
    .input {
      margin: 5px 0px;
    }
    display: flex;
  }
  .btn_edit {
    height: 40px;
    margin-left: 10px;
    margin-bottom: 5px;
    flex-direction: column;
    align-items: center;
  }
}
</style>
